<template>
    <div>
        <div class="order">
            <div class="order_price">实付金额 <b>¥{{calculations.price}}</b></div>
            <div class="order_btn" @click="()=>{handleshowConfirmChange(true)}">提交订单</div>
        </div>
        <div class="mask" v-show="showConfirm" @click="()=>{handleshowConfirmChange(false)}">
            <div class="mask_content" @click.stop>
                <h3 class="mask_content_title">确认离开收银台？</h3>
                <p class="mask_content_desc">请尽快完成支付，否则将被取消</p>
                <div class="mask_content_btns">
                    <div 
                    class="mask_content_btn mask_content_btn--first"
                    @click="()=>{handleConfirmOrder(true)}"
                    >取消订单</div>
                    <div 
                    class="mask_content_btn mask_content_btn--last"
                    @click="()=>{handleConfirmOrder(false)}"
                    >确认支付</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {uesCommonCartEffect} from '../../effects/cartEffects'
import {useStore} from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import { post } from '../../utils/request'
import { ref } from 'vue'

const useMakeOrderEffect=(productList,shopName,shopId)=>{
    //提交和取消订单
    const store=useStore()
    const router = useRouter()
    const handleConfirmOrder = async(isCanceled) => {
        const products=[]
        for(let i in productList.value){
            const product=productList.value[i]
            products.push({id:parseInt(product._id,10), num:product.count})
        }
        try{
            const result = await post('/api/order',{
                addressId:1,
                shopId,
                shopName:shopName.value,
                isCanceled,
                products
            })
            if(result?.errno===0){
                store.commit('clearCartData',shopId)
                router.push({name: 'OrderList'})
            }
        }catch(e){
            console.log('下单失败');
        }
    }
    return {handleConfirmOrder}
}
//控制mask的展示
const useShowMaskEffect=()=>{
    const showConfirm=ref(false)
    const handleshowConfirmChange=(status)=>{
        showConfirm.value=status
    }
    return {handleshowConfirmChange,showConfirm}
}
export default {
    name:'Order',
    setup() {
        const route = useRoute()
        
        const shopId=parseInt(route.params.id,10)
        const {calculations,shopName,productList} = uesCommonCartEffect(shopId)

        //提交和取消订单
        const {handleConfirmOrder}=useMakeOrderEffect(productList,shopName,shopId)
        //控制mask的展示
        const {handleshowConfirmChange,showConfirm}=useShowMaskEffect()
        
        return {calculations,handleConfirmOrder,showConfirm,handleshowConfirmChange}
        
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixins';
.order{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: .49rem;
    line-height: .49rem;
    background: $bgColor;
    &_price{
        flex: 1;
        font-size: .14rem;
        color: $content-fontcolor;
        text-indent: .24rem;//缩进24像素
    }
    &_btn{
        width: .98rem;
        font-size: .14rem;
        color: $bgColor;
        background: #4FB0F9;
        text-align: center;
    }
}
.mask{
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.50);
    &_content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 3rem;
        height: 1.56rem;
        background: #FFFFFF;
        border-radius: .04rem;
        text-align: center;
        &_title{
            font-size: .18rem;
            color: #333333;
            line-height: .26rem;
            margin: .24rem 0 0 0;
        }
        &_desc{
            font-size: .14rem;
            color: #666666;
            line-height: .2rem;
            margin: .08rem 0 0 0;
        }
        &_btns{
            margin: .24rem .58rem 0;
            display: flex; 
        }
        &_btn{
            flex: 1;
            line-height: .32rem;
            width: .8rem;
            font-size: .14rem;
            border-radius: .16rem;
            &--first{
                margin-right: .12rem;
                border: .01rem solid #4FB0F9;
                color: #0091FF;
            }
            &--last{
                margin-left: .12rem;
                background: #4FB0F9;
                color: #FFFFFF;
            }
        }
    }
}
</style>